<template>
	<!-- <div class="navbar overflow">
		<div class="logo fl"><img src="../assets/images/logo.png" />埔企通一站式企业服务平台</div>
		<div class="nav fl">
			<div v-for="(item, indx) in list" :key="indx" class="box pointer" :class="indx == tabIndex ? 'cur' : ''"
				@click="routerbt(indx,item.url)">
				{{ item.title }}<span v-if="indx == tabIndex" />
			</div>
		</div>
		<div class="user fr">
			<div class="box" v-if="loginbox == 0">{{userdata.name}}</div>
			<div class="bt" v-if="loginbox == 0" @click="out">退出登录</div>
			<div class="bt" v-if="loginbox == 1" @click="login">登录</div>
		</div>
	</div> -->
</template>

<script>
	import {
		tokenapi,
		useraddapi
	} from "@/api/enterprise/index";
	export default {
		data() {
			return {
				list: [{
						title: '查企业',
						url: '/'
					},
					{
						title: '企业邻居',
						url: '/mapindex'
					},
					{
						title: '预警通',
						// url: '/'
						url: '/earlywarning'
					},
				],
				// token:"7c6bde46-cd21-4d20-9503-8af700eee6aa",
				token:"",
				tabIndex: 0,
				loginbox:0,
				userdata:''
			};
		},
		created() {
			
			this.currentUrl = window.location.href
			if(this.currentUrl.indexOf('token') != -1){
				this.token = this.$route.query.token
				this.tokeninit()
			}else{
				if(JSON.parse(sessionStorage.getItem('user') != null)){
					this.userdata = JSON.parse(sessionStorage.getItem('user'));
					this.useraddinit(this.userdata.name,this.userdata.id)
					this.loginbox = 0
				}else{
					const externalUrl = 'https://puqitong.com/enterprise/login';
					window.location.href = externalUrl;
					this.loginbox = 1
				}
			}
			if(sessionStorage.getItem('navcur') != null){
				this.tabIndex = sessionStorage.getItem('navcur')
			}else{
				this.tabIndex = 0
			}
			
		},
		mounted() {
			
			
			
		},
		methods: {
			tokeninit(){
				let queryParams = {
					token:this.token
				}
				tokenapi(queryParams).then(res => {
					if(res.data != null){
						if(res.data.id == null ){
							const externalUrl = 'https://puqitong.com/enterprise/login';
							window.location.href = externalUrl;
						}else{
							sessionStorage.setItem('user',JSON.stringify(res.data))
							if(JSON.parse(sessionStorage.getItem('user') != null)){
								this.userdata = JSON.parse(sessionStorage.getItem('user'));
								this.useraddinit(this.userdata.name,this.userdata.id)
								this.loginbox = 0
							}else{
								const externalUrl = 'https://puqitong.com/enterprise/login';
								window.location.href = externalUrl;
								this.loginbox = 1
							}
						}
						
					}else{
						const externalUrl = 'https://puqitong.com/enterprise/login';
						window.location.href = externalUrl;
						this.loginbox = 1
					}
					
				})
			},
			useraddinit(userName,phone){
				useraddapi(userName,phone).then(res => {
					sessionStorage.setItem('userId',JSON.stringify(res.data))
					
				})
			},
			routerbt(index,name) {
				// this.tabIndex = index
				sessionStorage.setItem('navcur',index)
				this.$router.push({
					path: name
				})
			},
			out(){
				sessionStorage.removeItem('user')
				this.loginbox = 1
			},
			login(){
				this.tokeninit()
				this.loginbox = 0
			}
		}
	};
</script>

<style scoped lang="scss">
	
	.navbar {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		height: 100px;
		padding: 0 30px;
		

		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100px;
			font-size: 26px;
			color: #fff;
			font-weight: bold;
			margin-right: 8%;

			img {
				margin-right: 11px;
			}
		}

		.nav {
			display: flex;
			height: 100px;
			justify-content: center;
			align-items: center;
			font-size: 20px;
			color: #fff;
			font-weight: bold;

			.box {
				position: relative;
				height: 100px;
				line-height: 100px;

				span {
					position: absolute;
					left: 0;
					bottom: 0;
					height: 5px;
					background: #fff;
					display: block;
					width: 60px;
				}
			}

			.box::after {
				content: "|";
				margin: 0 36px;
				color: rgba(255, 255, 255, 0.2);
				font-weight: initial;
				font-size: 18px;
			}

			.box:last-child::after {
				display: none;
			}

		}

		.user {
			display: flex;
			height: 95px;
			justify-content: center;
			align-items: center;

			.box {
				font-size: 16px;
				line-height: 28px;
				color: #FFFFFF;
				font-weight: 400;
				background: url(../assets/images/usericon.png) no-repeat left center;
				padding-left: 22px;
			}

			.bt {
				width: 62px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				background: #FFFFFF;
				border-radius: 5px 5px 5px 5px;
				font-size: 12px;
				color: #000000;
				font-weight: 400;
				margin-left: 10px;
				cursor: pointer;
			}
		}
	}
</style>
<style>
	.subheader{
		display: none !important;
	}
	@media (min-width:1920px) {
		.home .header {
			background-size: cover !important;
		}
	}
</style>